<template>
  <ul class="tabbar">
    <router-link
      class="tabbar-item"
      tag="li"
      v-for="tab in list"
      :key="tab.pagePath"
      :to="tab.pagePath"
    >
      <van-icon :name="tab.icon" size="24" />
      <span>{{tab.text}}</span>
    </router-link>
  </ul>
</template>

<script>
export default {
  name: 'Tabbar',
  props: {
    /**
     * list 数组，用来表示在 tabbar 上显示的 tab 项。
     * 数组元素个数在 2 - 5 之间。
     * 约定数组中每个元素的结构为：{ icon: 图标, text: 文本, pagePath: 点击跳转的URL }
     */
    list: {
      type: Array,
      required: true, // 必传
      validator(val) { // 自定义校验
        // 数组长度限制
        const validLen = val.length >= 2 && val.length <= 5
        if (!validLen) {
          return false
        }
        // 数组元素为对象，且每个对象需要有 icon、text、pagePath 属性
        const validEle = val.every(item => {
          const ownProperties = ['icon', 'text', 'pagePath']
          return typeof item === 'object' && Object.getOwnPropertyNames(item).every(prop => ownProperties.includes(prop))
        })
        return validEle
      },
    },
  },
}
</script>

<style lang="less" scoped>
  // scoped 表示所书写的样式仅在当前组件中有作用（面试）
  // 这是通过在渲染后的 DOM 节点树中添加 data-*
  // 属性来标识当前组件的，* 号使用的是各组件的 hash 值

  .tabbar {
    display: flex;
    border-top: 1px solid #eaeaea;

    &-item {
      height: 50px;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;

      span {
        font-size: 12px;
      }
    }
  }

  .router-link-exact-active, .router-link-active {
    color: #f00;
  }
</style>
